import React, { useEffect, useState } from "react";
import { Request } from "@/services";
import Map from "./components/Map";

interface CenterPageConfigType {
  detailList: any[];
  mapData: Record<string, any>;
}

const CenterPage: React.FC = () => {
  const [config, setConfig] = useState<CenterPageConfigType>({
    detailList: [],
    mapData: {}
  });

  const getConfig = async () => {
    try {
      const resp = await Request.post("/centerPageData");
      setConfig(resp.data);
    } catch (e) {
      setConfig({
        detailList: [],
        mapData: {}
      });
    }
  };

  useEffect(() => {
    getConfig().finally();
  }, []);

  return (
    <div className="flex flex-col">
      {/* 地图 */}
      <Map data={config.mapData} />
      {/* 金刚板块 */}
      <div className="mt-[58px] grid grid-cols-3 grid-rows-2 gap-2 px-[20px]">
        {config.detailList.map((item) => (
          <div className="flex items-center p-[10px] rounded-[5px] border-[1px] border-solid border-[#343f4b] bg-[rgba(19,25,47,.8)]" key={item.id}>
            <img src={item.image} alt={item.title} draggable={false} className="w-[100px] h-[100px] object-contain" />
            <div className="ml-[10px]">
              <div className="text-[#bcdcff] text-[16px] mb-[20px]">{item.title}</div>
              <div className="font-bold text-[20px] bg-[linear-gradient(to_bottom,#fff,#4db6e5)] text-[transparent] bg-clip-text">
                <span>{item.number}</span>
                <span className="ml-[10px] text-[16px]">{item.unit}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default CenterPage;
